<template>
  <el-table :row-key="rowkey" :data="tableData" stripe style="width: 100%">
    <!-- <el-table-column prop="id" label="编号" width="120"> </el-table-column> -->
    <!-- 默认 -->
    <template v-for="(item, index) in columns">
      <el-table-column
        :fixed="item.fixed"
        :key="index"
        v-if="item.field"
        :label="item.title"
        :prop="item.field"
        :width="item.width"
      >
      </el-table-column>
      <!-- 自定义 -->
      <el-table-column
        :fixed="item.fixed"
        :label="item.title"
        :key="index"
        :width="item.width"
        v-else
      >
        <!-- slot-scope="scope"  获取绑定的数据 -->
        <template slot-scope="scope">
          <!-- switch -->
          <el-switch
            v-if="item.type === 'switch'"
            active-color="#13ce66"
            inactive-color="#ff4949"
            v-model="scope.row[item.payload.field]"
            @change="item.payload.change(scope.row)"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>

          <!-- tag -->
          <!-- 自身不传递参数
          <el-tag
            v-if="item.type === 'tag' && !item.payload.color"
            :type="scope.row[item.payload.field] | elTagTypeFilter"
            >{{ scope.row[item.payload.field] | cateFilter }}</el-tag
          >
          自身传递color参数
          <el-tag
            v-if="item.type === 'tag' && item.payload.color"
            :type="item.payload.color"
            >{{ scope.row[item.payload.field] | cateFilter }}</el-tag
          > -->
          <!-- 修改过滤器后简化代码 -->
          <!-- <el-tag
            v-if="item.type === 'tag'"
            :type="
              item.payload.color ||
              scope.row[item.payload.field] | elTagTypeFilter
            "
            >{{ scope.row[item.payload.field] | cateFilter }}</el-tag
          > -->
          <!-- 过滤商品分级展示 -->
          <el-tag
            v-if="item.type === 'tag'"
            :type="
              filterFn(
                'elTagTypeFilter',
                item.payload.color || scope.row[item.payload.field]
              )
            "
          >
            <!-- 根据定义过滤器名称过滤 -->
            {{
              filterFn(item.payload.filterName, scope.row[item.payload.field])
            }}</el-tag
          >
          <!-- btn -->
          <template v-if="item.type === 'btn'">
            <el-button
              :type="item.type"
              size="mini"
              v-for="(item, index) in item.payload"
              :key="index"
              @click="item.click(scope.row)"
              ><span v-if="item.name">{{ item.name }}</span>
              <i v-else :class="item.icon"></i>
            </el-button>
          </template>
          <!-- img图片 -->
          <img
            v-if="item.type === 'img'"
            :src="scope.row[item.payload.field]"
            alt="img"
          />
          <!-- tips -->
          <el-tooltip
            v-if="item.type === 'tips'"
            class="item"
            effect="dark"
            :content="scope.row[item.payload.field]"
            placement="top"
          >
            <span>
              {{ scope.row[item.payload.field] | substrFilter(8) }}
            </span>
          </el-tooltip>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
import Vue from "vue";
export default {
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    rowkey: {
      type: String,
      default: "cat_id",
    },
    columns: {
      // [{title,field(字段)...}]
      type: Array,
      required: true,
    },
  },
  data() {
    return {};
  },

  methods: {
    filterFn(filterName, ...params) {
      let tempFn = Vue.filter(filterName);
      return tempFn(...params);
    },
  },
};
</script>

<style lang="scss" scoped></style>
